<template>
	<div>
    <div class="margin-l20">
      <el-button v-if="permission == 3" type="primary" @click="linkToAdd">新建资料</el-button>
      <el-button @click='handleCopy(url,$event)'>复制链接</el-button>
    </div>
    <div style="margin-left: 20px;overflow: hidden;">
      <el-form class="form-container" style="padding: 20px 0;width: 100%;">
        <el-input v-model="listQuery.datumName" clearable placeholder="请输入资料名称进行搜索" @keyup.enter.native="searchDatum" style="width: 200px;"></el-input>
        <el-select  style="width: 120px;" clearable v-model="listQuery.selectSort" placeholder="请选择分类">
          <el-option
            v-for="item in sortOptions"
            :key="item.datumCatId"
            :label="item.name"
            :value="item.datumCatId">
          </el-option>
        </el-select>
        <el-select  style="width: 150px;" v-model="listQuery.selectLimit" clearable placeholder="请选择下载权限">
          <el-option key="19"  value="19" label="免费">
          </el-option>
          <el-option key="17"  value="17" label="VIP免费">
          </el-option>
          <el-option key="20"  value="20" label="SVIP免费">
          </el-option>
          <el-option key="18"  value="18" label="收费">
          </el-option>
        </el-select>
        <el-date-picker type="date" style='width:200px;' value-format="yyyy-MM-dd" placeholder="上传日期（开始）" @change="timeCheck(1)" v-model="listQuery.upload_time">
        </el-date-picker>
        <el-date-picker type="date" style='width:200px;' value-format="yyyy-MM-dd" placeholder="上传日期（结束）" @change="timeCheck(2)"  v-model="listQuery.end_time">
        </el-date-picker>
        <el-button class='search' type="primary" @click="searchDatum">搜索</el-button>
      </el-form>

    </div>
		<div class="margin-l margin-r">

			<div>
				<el-table :data="tableData" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" row-key="datumId" v-loading="listLoading" fit highlight-current-row class="c-width100 color-222 family-PingFangSC-Regular font-s12">
				 	<el-table-column align="center" label="资料名称" >
				        <template slot-scope="scope">
				          <div class="font-s14 text-alignL">{{scope.row.name}}</div>
                  <div class="text-alignL">
                    <span class="color-999 margin-r5">{{scope.row.format}}</span>|<span class="color-409">{{scope.row.price}}</span>
                    <span class="ib padding8-5 lineh0 c-fc-blue border-409" v-if="scope.row.permission == 17">VIP免费</span>
                    <span class="ib padding8-5 lineh0 c-fc-blue border-409" v-else-if="scope.row.permission == 18">收费</span>
                    <span class="ib padding8-5 lineh0 c-fc-blue border-409" v-else-if="scope.row.permission == 20">SVIP免费</span>
                    <span class="ib padding8-5 lineh0 c-fc-blue border-409" v-else>免费</span>
                  </div>
				        </template>
			      	</el-table-column>
			      	<!--<el-table-column width="50" align="center" label="资料格式">-->
				        <!--<template slot-scope="scope">-->
				          <!--<span>{{scope.row.format}}</span>-->
				        <!--</template>-->
				    <!--</el-table-column>-->
			      	<!--<el-table-column width="80" align="center" label="资料权限">-->
				        <!--<template slot-scope="scope">-->
				          <!--<span v-if="scope.row.permission == 17">VIP免费</span>-->
                  <!--<span v-else-if="scope.row.permission == 18">收费</span>-->
                  <!--<span v-else-if="scope.row.permission == 20">SVIP免费</span>-->
                  <!--<span v-else>免费</span>-->
				        <!--</template>-->
				    <!--</el-table-column>-->
				    <!--<el-table-column width="100"  align="center" label="资料价格">-->
				        <!--<template slot-scope="scope">-->
				          <!--<span>{{scope.row.price}}</span>-->
				        <!--</template>-->
				    <!--</el-table-column>-->
          <el-table-column width="50" align="center" label="排序">
            <template slot-scope="scope">
              <span>{{scope.row.sort}}</span>
            </template>
          </el-table-column>
          <el-table-column width="80"  align="center" label="下载次数">
            <template slot-scope="scope">
              <span>{{scope.row.downloadTimes}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="80" label="所属分类">
            <template slot-scope="scope">
              <span>{{scope.row.datumCatId}}</span>
            </template>
          </el-table-column>
				    <el-table-column width="150"  align="center" label="上传时间">
				        <template slot-scope="scope">
				          <span v-if="scope.row.createdAt">{{scope.row.createdAt}}</span>
				        </template>
				    </el-table-column>

				    <el-table-column width="70"  align="center" label="是否有上传资料">
				        <template slot-scope="scope">
				          <span v-if="scope.row.qiniuObject">是</span>
                  <span v-else>否</span>
				        </template>
				    </el-table-column>
					     <el-table-column  width="220"  align="center" label="操作">
					        <template slot-scope="scope">
                          <b @click="linkToCourse(scope.row.datumId)">相关课程</b><span v-if="permission == 3" class="color-409">|</span>
			                    <b v-if="permission == 3" @click="linkToEdit(scope.row.datumId)">编辑</b><span v-if="permission == 3" class="color-409">|</span>
			                    <!--<b @click="linkToUpload(scope.row.datumId)">上传资料</b>-->
			                    <b v-if="permission == 3" @click="deleteDatum(scope.row.datumId)">删除</b>
			                </template>
					    </el-table-column>
				   </el-table>
				<div class="block text-c">
					<!--分页组件 current-page:当前页   -->
					<!--   page-sizes:每页几条数据（选项）   -->
					<!--   page-size:每页几条数据   -->
					<!--   total:总条数   -->
				    <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="currentPage"
				      :page-sizes="[10, 20, 30, 40]"
				      :page-size="10"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total">
				    </el-pagination>
				</div>
			</div>
		</div>
    <!-- <div class="courseRelated" v-show="isCourseRelated">
      <p class="filter" @click="close"></p>
      <div class="course_container">
        <p>相关课程<span style="color:red;">(设置视频/音频下关联资料，请到对应视频/音频编辑页面操作)</span></p>
        <div class="course_list">
          <div class="title c-flex-row c-aligni-center">
            <div class="c-width50 center">标题</div>
            <div class="c-width50 center">类型</div>
          </div>

          <div class="c-flex-row c-aligni-center" v-for="item in course_list">
            <span class="serialNum c-width10">{{item.num}}</span>
            <p class="courseName c-width60">{{item.title}}</p>
            <p class="courseType c-width10 center">{{item.type}}</p>
          </div>
        </div>
        <div class="btn" style="text-align:center; margin-top:50px;">
          <el-button type="primary" icon="el-icon-check" @click="close">关闭</el-button>
        </div>
      </div>
    </div> -->
    <datum-related v-if="isCourseRelated" :datumId="datumId" @hideRelated="hideRelated"></datum-related>
	</div>
</template>
<script>
import clip from '@/utils/clipboard' // use clipboard directly
import { getDatumLists, deleteDatum, getDatumRelate } from '@/api/datum'
import { knowledge_datums } from '@/utils/permission'
import datumRelated from './components/datumRelated.vue'
export default {
  components: {
    datumRelated
  },
  data() {
    return {
      permission: 3,
      url: null,
      isCourseRelated: false,
      datumId: null,
      currentPage: 1, // 当前页
      total: null, // 数据总条数
      listLoading: false, // 加载数据的时候显示动画
      listQuery: {
        page: 1,
        limit: 10,
        upload_time: null, // 上传时间（开始）
        end_time: null, // 上传时间（结束）
        datumName: null, // 搜索的资料名
        selectSort: null, // 搜索的分类
        selectLimit: null // 搜索的权限
      },
      selectCourse: null, // 关联的课程
      sortOptions: [],
      courseOptions: [
        {
          id: 0,
          value: '音频分享免费'
        }, {
          id: 1,
          value: '关联课程以'
        }, {
          id: 2,
          value: '关联课程二'
        }, {
          id: 3,
          value: '关联课程三'
        }
      ],
      tableData: []
    }
  },
  methods: {
    getModelPermission() {
      this.permission = knowledge_datums()
    },
    handleCopy(text, event) {
      clip(text, event)
    },
    // getDatumRelate(datumId) {
    //   getDatumRelate(datumId).then(res => {
    //     console.log('关联数据：', res.data)
    //     this.relatedData = res.data.data
    //   }).catch(error => {
    //     console.log(error)
    //   })
    // },
    linkToCourse(datumId) {
      // this.getDatumRelate(datumId)
      this.datumId = datumId
      this.isCourseRelated = true
    },
    hideRelated() {
      this.isCourseRelated = false
    },
    getDatumList() {
      this.listLoading = true
      getDatumLists(this.listQuery).then(res => {
        this.tableData = res.data.data.datum.data
        this.total = res.data.data.datum.total
        if (res.data.data.datumCat) {
          this.sortOptions = res.data.data.datumCat
        }
        this.url = res.data.data.url
        this.listLoading = false
        // console.log(res.data.data.datum)
      }).catch(err => {
        console.log(err)
      })
    },
    searchDatum() {
      this.getDatumList()
    },
    deleteDatum(dId) { // 删除资料
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('dId: ')
        console.log(dId)
        deleteDatum(dId).then(res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getDatumList()
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    linkToAdd(id) { // 跳转至编辑资料
      this.$router.push({ path: `/datum/createDatum` })
    },
    linkToEdit(id) { // 跳转至编辑资料
      console.log(id)
      this.$router.push({ path: `/datum/editDatum/${id}` })
      // location.href = '#/datum/editDatum/' + id
    },
    linkToUpload(id) { // 跳转至上传资料
      this.$router.push({ path: `/datum/uploadDatum/${id}` })
      // location.href = '#/datum/uploadDatum/' + id
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      this.listQuery.limit = val
      this.getDatumList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) { // 切换当前页
      this.listQuery.page = val
      this.getDatumList()
      console.log(`当前页: ${val}`)
    },
    timeCheck(type) {
      if (this.listQuery.upload_time && this.listQuery.end_time && this.listQuery.upload_time > this.listQuery.end_time) {
        this.$message({
          message: '结束时间不能小于开始时间',
          type: 'error'
        })

        if (type == 1) {
          this.listQuery.upload_time = null
        } else {
          this.listQuery.end_time = null
        }
      }
    }
  },
  created() {
    this.getModelPermission()
    this.getDatumList()
    this.total = this.tableData.length
  }
}
</script>

<style scoped>
  .course_container {
    width: 600px;
    height: 400px;
    padding: 20px;
    background: #fff;
    position: fixed;
    left: 20%;
    top: 15%;
    border: 1px solid #555;
    z-index: 999;
  }
    b{
    	cursor: pointer;
    	font-weight: 500;
    }
	b:hover{
		color: #0A76A4;
	}
	.hover33:hover{
		color: #333;
	}
	.hover33{
		color: #0A76A4;
	}
</style>
